<template>
  <div class="container mt-4">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">银行卡验证功能测试</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">银行卡号</label>
              <input 
                v-model="testData.cardNumber" 
                type="text" 
                class="form-control" 
                placeholder="请输入银行卡号"
                @input="validateCard"
              >
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label">开户银行</label>
              <input 
                v-model="testData.bankName" 
                type="text" 
                class="form-control" 
                placeholder="请输入开户银行"
                @input="validateCard"
              >
            </div>
          </div>
        </div>
        
        <!-- 验证结果显示 -->
        <div class="mt-4">
          <h6>验证结果：</h6>
          <div class="row">
            <div class="col-md-6 mb-3">
              <strong>开户银行：</strong>
              <span>{{ testData.bankName || '-' }}</span>
              <!-- 银行名称验证状态 -->
              <span v-if="testData.bankName" class="ms-2">
                <i v-if="validation.bankNameValid" class="fas fa-check-circle text-success" title="银行名称有效"></i>
                <i v-else class="fas fa-exclamation-circle text-warning" title="银行名称需要验证"></i>
              </span>
              <span v-if="validation.standardizedBankName && validation.standardizedBankName !== testData.bankName" class="text-muted small">
                <br><i class="fas fa-arrow-right me-1"></i>标准化为：{{ validation.standardizedBankName }}
              </span>
            </div>
            <div class="col-md-6 mb-3">
              <strong>银行卡号：</strong>
              <span>{{ testData.cardNumber || '-' }}</span>
              <!-- 银行卡号验证状态 -->
              <span v-if="testData.cardNumber" class="ms-2">
                <i v-if="validation.cardNumberValid" class="fas fa-check-circle text-success" title="银行卡号格式正确"></i>
                <i v-else class="fas fa-exclamation-circle text-warning" title="银行卡号格式需要验证"></i>
              </span>
              <span v-if="validation.detectedBank" class="text-info small">
                <br><i class="fas fa-info-circle me-1"></i>识别为：{{ validation.detectedBank }}
              </span>
              <!-- 银行匹配状态 -->
              <span v-if="testData.cardNumber && testData.bankName" class="small">
                <br>
                <span v-if="validation.bankMatch" class="text-success">
                  <i class="fas fa-check-circle me-1"></i>银行信息匹配
                </span>
                <span v-else-if="validation.detectedBank && !validation.bankMatch" class="text-warning">
                  <i class="fas fa-exclamation-triangle me-1"></i>银行信息不匹配
                </span>
              </span>
            </div>
          </div>
          
          <!-- 验证结果汇总 -->
          <div v-if="validation.errors.length > 0" class="alert alert-warning mt-3">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-exclamation-triangle text-warning me-2"></i>
              <strong>银行卡信息验证提醒</strong>
            </div>
            <ul class="mb-0">
              <li v-for="error in validation.errors" :key="error" class="small">
                {{ error }}
              </li>
            </ul>
          </div>
          
          <div v-else-if="validation.isValid" class="alert alert-success mt-3">
            <div class="d-flex align-items-center">
              <i class="fas fa-check-circle text-success me-2"></i>
              <strong>银行卡信息验证通过</strong>
              <div class="ms-auto">
                <span class="badge bg-success me-1">卡号格式正确</span>
                <span class="badge bg-success me-1">银行名称有效</span>
                <span v-if="validation.bankMatch" class="badge bg-success">银行匹配</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 测试用例 -->
        <div class="mt-4">
          <h6>测试用例：</h6>
          <div class="row">
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-primary btn-sm w-100" 
                @click="loadTestCase('icbc')"
              >
                工商银行测试
              </button>
            </div>
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-primary btn-sm w-100" 
                @click="loadTestCase('abc')"
              >
                农业银行测试
              </button>
            </div>
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-primary btn-sm w-100" 
                @click="loadTestCase('boc')"
              >
                中国银行测试
              </button>
            </div>
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-warning btn-sm w-100" 
                @click="loadTestCase('mismatch')"
              >
                不匹配测试
              </button>
            </div>
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-danger btn-sm w-100" 
                @click="loadTestCase('invalid')"
              >
                无效卡号测试
              </button>
            </div>
            <div class="col-md-4 mb-2">
              <button 
                class="btn btn-outline-secondary btn-sm w-100" 
                @click="clearTest"
              >
                清空
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { validateBankCard } from '@/utils/bankCardValidator'

// 测试数据
const testData = ref({
  cardNumber: '',
  bankName: ''
})

// 验证结果
const validation = ref({
  isValid: false,
  cardNumberValid: false,
  bankNameValid: false,
  bankMatch: false,
  detectedBank: null,
  standardizedBankName: null,
  errors: []
})

// 验证银行卡
const validateCard = () => {
  if (!testData.value.cardNumber || !testData.value.bankName) {
    validation.value = {
      isValid: false,
      cardNumberValid: false,
      bankNameValid: false,
      bankMatch: false,
      detectedBank: null,
      standardizedBankName: null,
      errors: testData.value.cardNumber || testData.value.bankName ? ['请输入完整的银行卡号和银行名称'] : []
    }
    return
  }
  
  try {
    const result = validateBankCard(testData.value.cardNumber, testData.value.bankName)
    validation.value = {
      isValid: result.isValid,
      cardNumberValid: result.cardNumberValid,
      bankNameValid: result.bankNameValid,
      bankMatch: result.bankMatch,
      detectedBank: result.detectedBank,
      standardizedBankName: result.standardizedBankName,
      errors: result.errors || []
    }
  } catch (error) {
    console.error('银行卡验证失败:', error)
    validation.value = {
      isValid: false,
      cardNumberValid: false,
      bankNameValid: false,
      bankMatch: false,
      detectedBank: null,
      standardizedBankName: null,
      errors: ['验证过程中发生错误']
    }
  }
}

// 加载测试用例
const loadTestCase = (type) => {
  const testCases = {
    icbc: {
      cardNumber: '6222021234567890123',
      bankName: '中国工商银行'
    },
    abc: {
      cardNumber: '6228481234567890123',
      bankName: '中国农业银行'
    },
    boc: {
      cardNumber: '6216601234567890123',
      bankName: '中国银行'
    },
    mismatch: {
      cardNumber: '6222021234567890123', // 工商银行卡号
      bankName: '中国农业银行' // 农业银行名称
    },
    invalid: {
      cardNumber: '1234567890',
      bankName: '测试银行'
    }
  }
  
  if (testCases[type]) {
    testData.value = { ...testCases[type] }
    validateCard()
  }
}

// 清空测试
const clearTest = () => {
  testData.value = {
    cardNumber: '',
    bankName: ''
  }
  validation.value = {
    isValid: false,
    cardNumberValid: false,
    bankNameValid: false,
    bankMatch: false,
    detectedBank: null,
    standardizedBankName: null,
    errors: []
  }
}
</script>

<style scoped>
.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn {
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.alert {
  border-radius: 8px;
}

.badge {
  font-size: 0.75em;
}
</style>